<template>
  <div>
    <myDivider :name="'用户详情'"></myDivider>
    <el-page-header @back="$router.push('/customerManag/List')">
    </el-page-header>
    <div class="wholePage">
      <el-form :model="ruleForm" ref="ruleForm" style="width: 1200px;margin-top: 20px;" label-width="100px">

        <el-row>
          <el-col :span="6">
            <el-form-item label="用户账号：" prop="account">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名：" prop="name">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别：" prop="gender">
              <el-select size="small" disabled style="width: 100%;" v-model="ruleForm.gender" placeholder="">
                <el-option label="女" value="0"></el-option>
                <el-option label="男" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期：" prop="birthday">
              <el-date-picker size="small" disabled style="width: 100%;" value-format="yy-MM-dd"
                v-model="ruleForm.birthday" type="date" placeholder="">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="民族：" prop="nationName">
              <el-input v-model="ruleForm.nationName" disabled style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件类型：" prop="idCardType">
              <el-select size="small" disabled style="width: 100%;" v-model="ruleForm.idCardType" placeholder="">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="护照" value="2"></el-option>
                <el-option label="驾照" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件号：" prop="idNumber">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.idNumber" type="text" class="pwd">
                <!-- <i slot="suffix" class="el-icon-view" @click="hiddenPwd"></i> -->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="婚姻状况：" prop="maritalStatus">
              <el-select size="small" disabled style="width: 100%;" v-model="ruleForm.maritalStatus" placeholder="">
                <el-option label="未婚" :value="0"></el-option>
                <el-option label="已婚" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="政治面貌：" prop="isPartyMember">
              <el-select size="small" disabled style="width: 100%;" v-model="ruleForm.isPartyMember" placeholder="">
                <el-option label="群众" :value="0"></el-option>
                <el-option label="党员" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文化程度：" prop="educationLevelName">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.educationLevelName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="国籍：" prop="nationalityName">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.nationalityName"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="籍贯：" prop="nativePlace">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.nativePlace"></el-input>
            </el-form-item>
          </el-col>
        </el-row>



        <el-row>
          <el-col :span="12">
            <el-form-item label="家庭住址：" prop="homeAddress">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.homeAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职业：" prop="occupation">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.occupation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作单位：" prop="company">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.company"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="单位住址：" prop="companyAddress">
              <el-input size="small" style="width: 100%;" disabled v-model="ruleForm.companyAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="紧急联系人：" prop="emergencyContact">
              <el-input size="small" style="width: 200px;" disabled v-model="ruleForm.emergencyContact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话：" prop="phoneNumber">
              <el-input size="small" style="width: 200px;" disabled v-model="ruleForm.phoneNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" style="margin-top: 30px;">
      <!-- 绑定人口 -->
      <el-tab-pane v-if="logOnUser.unitType == 'system'" label="绑定人口" name="people">
        <span style="cursor: pointer;margin: 20px ;" v-if="peopleTableData.length == 0"
          @click="replaceClick">无绑定用户，点击绑定</span>
        <el-table v-else :data="peopleTableData" style="width: 100%;">
          <el-table-column align="center" prop="name" label="姓名" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.name ? scope.row.name : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="phoneNumber" label="手机号" width="165">
            <template slot-scope="scope">
              <span>{{ scope.row.phoneNumber ? scope.row.phoneNumber : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="gender" label="性别" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.gender ? scope.row.gender == 0 ? '女' : '男' : '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="nation" label="民族" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.nationName ? scope.row.nationName : '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="idNumber" label="身份证号">
            <template slot-scope="scope">
              <span>{{ scope.row.idNumber ? scope.row.idNumber : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="birthday" label="出生日期" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.birthday ? scope.row.birthday : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <div class="textBtn">
                <el-row>
                  <el-col class="el" :span="12">
                    <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                      @click="replaceClick(scope.row)">替换</span>
                  </el-col>
                  <el-col class="el" :span="12">
                    <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                      @click="unbindClick(scope.row)">解绑</span>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>

        </el-table>

      </el-tab-pane>
      <el-tab-pane label="绑定车辆" name="car"></el-tab-pane>
      <el-tab-pane label="绑定车位" name="carSpace"></el-tab-pane>
    </el-tabs>


    <!-- 所有弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="800px" :title="popTitle"
      :visible.sync="popShow">
      <el-divider></el-divider>
      <div style="display: flex;">
        <div style="display: flex;">
          <el-input style="width: 200px;" v-model="popKey1" clearable placeholder="根据用户账号搜索"></el-input>
          <el-input style="width: 150px;margin-left: 10px;" clearable v-model="popKey2" placeholder="根据姓名搜索"></el-input>
        </div>
        <el-button type="primary" style="margin-left: 10px;" @click="popSouSuo">查询</el-button>
        <el-button  style="margin-left: 10px;" @click="popResut">重置</el-button>
      </div>
      <el-table height="300px" :data="popData" style="width: 100%;margin-top: 20px;">
        <el-table-column align="center" prop="phone" label="用户账号">
          <template slot-scope="scope">
            <span>{{ scope.row.phone_number ? scope.row.phone_number : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="customerName" label="姓名" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.name ? scope.row.name : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="24">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="popConfirm(scope.row)">确认</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
    
      </el-table>
        <myPagination :total="total" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
        </myPagination>
      <el-divider></el-divider>
    </el-dialog>

  </div>
</template>

<script>
export default {


  data() {
    return {
      logOnUser: {},
      // 表单相关
      ruleForm: {},
      keyValue: 0,//级联选择器key的渲染id
      options: [],//级联选择器回显的数据
      total: 0,
      pageSize: 10,
      pageNum: 1,
      //  tabs
      activeName: '',

      // 绑定人员
      peopleTableData: [],
      // 绑定用户/车辆/车位弹窗
      popShow: false,
      popTitle: '选择用户',
      popData: [],
      popKey1: '',
      popKey2: '',
    }
  },
  async activated() {
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    if (this.logOnUser.unitType != 'system') {
      this.activeName = 'car'
    } else {
      this.activeName = 'people'
    }

    this.getDetail()
    this.getPeopleTableData() //获取绑定人口列表
    this.$nextTick(() => {
      this.$refs.ruleForm.clearValidate()
    })
  },
  methods: {
    // 绑定人口=============================
    replaceClick(row) { //点击替换按钮
      this.popShow = true
      this.popKey1 = ''
      this.popKey2 = ''
      this.getPopData()
    },
    unbindClick(row) { //点击解绑按钮
      this.$confirm('是否解除绑定?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.customer.myUnBindingPopulationInformation(this.$route.query.id, row.id)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '解除成功'
          });
          this.getDetail()
          this.getPeopleTableData()
          this.popShow = false

        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {

      });
    },
    // ================================绑定人口


    // 弹窗================================
    popSouSuo() {
      this.getPopData()
    },
    popResut(){
      this.popKey1 =''
      this.popKey2 =''
      this.pageNum = 1
      this.pageSize = 10
      this.getPopData()
    },
    pageSizeChange(e) {
      this.pageNum = 1
      this.pageSize = e
      this.getPopData()
    },
    PageChange(e) {

      this.pageNum = e
      this.getPopData()
    },
    async getPopData() {
      switch (this.activeName) {
        case 'people': //绑定人口
          let res = await this.$api.customer.myGetPopulationInformationList({
            "name": this.popKey2, //客户姓名
            "phoneNumber": this.popKey1, //客户手机号
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          })
          if (res.code == 200) {
            if(res.data.list.length==0&&this.pageNum!=1){
              this.pageNum = 1
              this.getPopData()
              return
            }
            this.popData = res.data.list
            this.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
          break
        case 'car': //绑定车辆
          break
        case 'carSpace': //绑定车位
          break
      }
    },
    async popConfirm(row) {
      this.$confirm('是否绑定该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.customer.myBindingPopulationInformation(this.$route.query.id, row.id)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '绑定成功'
          });
          this.getDetail()
          this.getPeopleTableData()
          this.popShow = false

        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {

      });

    },
    // ======================================弹窗

    async getPeopleTableData() {
      let res = await this.$api.customer.myGetBindingPopulationInformation(this.$route.query.id)
      if (res.code == 200) {
        if (res.data) {
          this.peopleTableData = []
          this.peopleTableData.push(res.data)
        } else {
          this.peopleTableData = []
        }

      } else {
        this.$message.error(res.message)
      }
    },
    handleClick() {

    },
    // 控制密码的显示与隐藏
    hiddenPwd() {
      this.showPwd = !this.showPwd // 默认为false
      if (this.showPwd) {
        document.getElementsByClassName('pwd')[0].style.webkitTextSecurity = 'none'
      } else {
        document.getElementsByClassName('pwd')[0].style.webkitTextSecurity = 'disc'
      }
    },
    async getDetail() {
      //直接获取详情
      let res = await this.$api.customer.myAppUserDetail(this.$route.query.id)
      console.log(res, '详情');
      if (res.code == 200) {
        this.ruleForm = res.data
      }
    },
  },
}
</script>

<style lang="less" scoped>
.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.wholePage {
  margin: 20px 0;

  /deep/ .el-form-item {
    margin: 0;
  }
}

.btn {
  position: fixed;
  bottom: 10px;
  right: 70px;
}

.annexBox {
  width: 500px;

  .annexList {
    width: 100%;
    box-sizing: border-box;
    border-right: 3px solid rgb(23, 197, 255);

    .el {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          width: 300px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:nth-child(2) {
          color: rgb(23, 197, 255);
          cursor: pointer;
          margin-right: 10px;
        }
      }
    }
  }

  .annexNone {
    color: #aaa;
  }
}

.pwd {
  -webkit-text-security: disc;
}

/deep/.el-input__suffix {
  -webkit-text-security: none;
}
</style>